<template>
    <div class="demo">
        <div class="flex-center-wrap">
            <div class="m-r-10 flex-0">表头配置</div>
            <el-tag
                class="m-r-10"
                :key="tag"
                v-for="tag in tags"
                closable
                :disable-transitions="false"
                @close="delTag(tag)"
            >
                {{ tag }}
            </el-tag>
            <el-input
                class="input-new-tag w-200"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
            >
            </el-input>
            <el-button v-else class="button-new-tag" size="small" @click="showInput"
                >+ New Tag</el-button
            >
        </div>
        <el-table class="m-t-10" :max-height="tableHeight" :height="tableHeight" :data="tableData">
            <el-table-column
                v-for="(item, index) in dynamicTags"
                :key="item"
                :prop="item"
                :label="item"
            >
                <template slot-scope="{ row }">
                    <el-input
                        :type="item.type || 'text'"
                        v-model="row[item]"
                        placeholder="请输入"
                    />
                </template>
            </el-table-column>

            <el-table-column prop="address" label="操作" width="180">
                <template slot-scope="{ row }">
                    <el-button type="primary" size="small" @click="addTableLine(row)">
                        新增
                    </el-button>
                    <el-button type="danger" size="small" @click="delTableLine(row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    props:{
        tableHeight:{
            type:Number,
            default: 300
        }
    },
    data() {
        return {
            dynamicTags: [],
            inputVisible: false,
            inputValue: '',
            activeName: '2',
            oldTableData: '',
            tableData: [
                {
                    kl_0: '',
                    kl_1: '',
                    id: 0,
                },
            ],
        }
    },
    methods: {
        delTag(tag) {
            this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
        },

        showInput() {
            this.inputVisible = true
            this.$nextTick((_) => {
                this.$refs.saveTagInput.$refs.input.focus()
            })
        },

        handleInputConfirm() {
            let inputValue = this.inputValue
            if (this.dynamicTags.includes(inputValue)) {
                return this.$message.error('标签已存在')
            }
            if (inputValue) {
                this.dynamicTags.push(inputValue)
            }
            this.inputVisible = false
            this.inputValue = ''
        },
        handleClick() {},
    },
}
</script>

<style lang="scss" scoped></style>
